85:I[903690,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"ExplicitChatIdProvider"] 86:I[838238,["/chat-static/_next/static/immutable/chunks/196gtrnm34jez.js","/chat-static/_next/static/immutable/chunks/2d5ra3e0435kr.js","/chat-static/_next/static/immutable/chunks/1enj0--qh8_5a.js","/chat-static/_next/static/immutable/chunks/0m1kq5rn-0ww-.js","/chat-static/_next/static/immutable/chunks/1sitju1_d7il0.js","/chat-static/_next/static/immutable/chunks/3l8fzjkdgt0wd.js","/chat-static/_next/static/immutable/chunks/3xk_70lpaq4rr.js","/chat-static/_next/static/immutable/chunks/0ko_j9ax7y6x0.js","/chat-static/_next/static/immutable/chunks/01baumogimg6p.js","/chat-static/_next/static/immutable/chunks/33yo_g45dr57n.js","/chat-static/_next/static/immutable/chunks/0sf49n39-457l.js","/chat-static/_next/static/immutable/chunks/2y4tmciu_pml1.js","/chat-static/_next/static/immutable/chunks/42f8gzjthz4xm.js","/chat-static/_next/static/immutable/chunks/0z_kwscs0-xkv.js","/chat-static/_next/static/immutable/chunks/1zwrrh1n1isp0.js","/chat-static/_next/static/immutable/chunks/1nag2_qii5d3b.js","/chat-static/_next/static/immutable/chunks/2297wuuoux0mr.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/3knm8li7yvqyy.js","/chat-static/_next/static/immutable/chunks/365o88upxg8nb.js","/chat-static/_next/static/immutable/chunks/35m4vqxcs65-t.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/2i3ljaggpd7p4.js","/chat-static/_next/static/immutable/chunks/0jv8_sp12utf0.js","/chat-static/_next/static/immutable/chunks/1e462i1ma5hqc.js","/chat-static/_next/static/immutable/chunks/0jywfwuiu_hpq.js","/chat-static/_next/static/immutable/chunks/3e68w17lftq23.js","/chat-static/_next/static/immutable/chunks/2ic8lww1-lsd6.js","/chat-static/_next/static/immutable/chunks/0ocytjp9zxitf.js","/chat-static/_next/static/immutable/chunks/1bfn_hru-4enh.js","/chat-static/_next/static/immutable/chunks/38fcx4vaj9p6g.js","/chat-static/_next/static/immutable/chunks/1dwxre2ob1wlz.js","/chat-static/_next/static/immutable/chunks/43-jsj0fq5lhp.js","/chat-static/_next/static/immutable/chunks/0p9rde4dp8mlf.js","/chat-static/_next/static/immutable/chunks/1w6qqgfpk6ysv.js","/chat-static/_next/static/immutable/chunks/0wekn8517kmiz.js","/chat-static/_next/static/immutable/chunks/3db-uyiz6we29.js","/chat-static/_next/static/immutable/chunks/2g2_401nxyrm5.js","/chat-static/_next/static/immutable/chunks/11o1o6qzk3ejc.js","/chat-static/_next/static/immutable/chunks/2nu9j7-o_9ilo.js","/chat-static/_next/static/immutable/chunks/3eajo0i8vj831.js"],"SWRDataProvider"] 87:T7148,[V0_FILE]typescriptreact:file="components/ui/label.tsx" isMerged="true" "use client" import * as React from "react" import * as LabelPrimitive from "@radix-ui/react-label" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70") const Label = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, ...props }, ref) => ( )) Label.displayName = LabelPrimitive.Root.displayName export { Label } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" import AuthenticationCard from "@/components/authentication-card" export default function Home() { return (

{/* Subtle overlay for better contrast */}

) } [V0_FILE]typescriptreact:file="components/authentication-card.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useState } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Eye, EyeOff, Mail, Lock, User, ArrowLeft, Check, Shield, X } from "lucide-react" type AuthStep = "login" | "signup" | "forgot-password" | "reset-password" | "otp" | "success" type AuthMode = "login" | "signup" interface PasswordRequirement { label: string test: (password: string) => boolean } const passwordRequirements: PasswordRequirement[] = [ { label: "At least 8 characters", test: (pwd) => pwd.length >= 8 }, { label: "One uppercase letter", test: (pwd) => /[A-Z]/.test(pwd) }, { label: "One lowercase letter", test: (pwd) => /[a-z]/.test(pwd) }, { label: "One number", test: (pwd) => /\d/.test(pwd) }, { label: "One special character", test: (pwd) => /[!@#$%^&*(),.?":{}|<>]/.test(pwd) }, ] export default function AuthenticationCard() { const [step, setStep] = useState("login") const [mode, setMode] = useState("login") const [showPassword, setShowPassword] = useState(false) const [showConfirmPassword, setShowConfirmPassword] = useState(false) const [isLoading, setIsLoading] = useState(false) const [formData, setFormData] = useState({ email: "", password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""], }) const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })) } const handleOtpChange = (index: number, value: string) => { if (value.length <= 1 && /^\d*$/.test(value)) { const newOtp = [...formData.otp] newOtp[index] = value setFormData((prev) => ({ ...prev, otp: newOtp })) // Auto-focus next input if (value && index < 5) { const nextInput = document.getElementById(`otp-${index + 1}`) nextInput?.focus() } } } const getPasswordStrength = (password: string) => { const passedRequirements = passwordRequirements.filter((req) => req.test(password)).length if (passedRequirements === 0) return { strength: 0, label: "", color: "" } if (passedRequirements <= 2) return { strength: 25, label: "Weak", color: "bg-red-500" } if (passedRequirements <= 3) return { strength: 50, label: "Fair", color: "bg-yellow-500" } if (passedRequirements <= 4) return { strength: 75, label: "Good", color: "bg-blue-500" } return { strength: 100, label: "Strong", color: "bg-green-500" } } const handleSubmit = async (e: React.FormEvent) => { e.preventDefault() setIsLoading(true) // Simulate API call await new Promise((resolve) => setTimeout(resolve, 1500)) if (step === "login" || step === "signup") { setStep("otp") } else if (step === "forgot-password") { setStep("reset-password") } else if (step === "reset-password") { setStep("success") } else if (step === "otp") { setStep("success") } setIsLoading(false) } const switchMode = (newMode: AuthMode) => { setMode(newMode) setStep(newMode) setFormData({ email: "", password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""] }) } const resetToLogin = () => { setStep("login") setMode("login") setFormData({ email: "", password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""] }) } const goToForgotPassword = () => { setStep("forgot-password") setFormData((prev) => ({ ...prev, password: "", confirmPassword: "", name: "", otp: ["", "", "", "", "", ""] })) } const getCardHeight = () => { switch (step) { case "login": return "h-[480px]" case "signup": return "h-[680px]" case "forgot-password": return "h-[380px]" case "reset-password": return "h-[520px]" case "otp": return "h-[380px]" case "success": return "h-[320px]" default: return "h-[480px]" } } const passwordStrength = getPasswordStrength(formData.password) const isSignupValid = step === "signup" && formData.name && formData.email && formData.password && formData.confirmPassword && formData.password === formData.confirmPassword && passwordRequirements.every((req) => req.test(formData.password)) return (

{/* Glass morphism card */}

{/* Content */}

{step === "login" && (

Welcome Back

handleInputChange("email", e.target.value)} className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Enter your email" required />

Password

handleInputChange("password", e.target.value)} className="pl-10 pr-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Enter your password" required />

)} {step === "signup" && (

Create Account

Join us today

Full Name

handleInputChange("name", e.target.value)} className="pl-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Enter your full name" required />

Password

{formData.password && (

Password strength = 75 ? "text-white/80" : passwordStrength.strength >= 50 ? "text-white/70" : "text-white/50" }`} > {passwordStrength.label}

{passwordRequirements.map((req, index) => (

{req.label}

))}

)}

Confirm Password

handleInputChange("confirmPassword", e.target.value)} className="pl-10 pr-10 bg-white/10 border-white/20 text-white placeholder:text-white/50 focus:border-white/40 focus:ring-white/20" placeholder="Confirm your password" required />

{formData.confirmPassword && formData.password !== formData.confirmPassword && (

Passwords do not match

)}

)} {step === "forgot-password" && (

Reset Password

Enter your email to receive reset instructions

)} {step === "reset-password" && (

Create New Password

Enter your new password below

New Password

Confirm New Password

{formData.confirmPassword && formData.password !== formData.confirmPassword && (

Passwords do not match

)}

)} {step === "otp" && (

Verify Your Email

Enter the 6-digit code sent to

{formData.email}

)} {step === "success" && (

{step === "success" && mode === "signup" ? "Welcome!" : "Success!"}

{step === "success" && mode === "signup" ? "Your account has been verified successfully" : "Your password has been reset successfully"}

)}

) }7c:["$","$L85",null,{"chatId":"qkj9UGz9Qgc","children":["$","$L86",null,{"data":{"@\"active-block\",\"qkj9UGz9Qgc\",":{"id":"b_B9FEvVYeZyU","messageId":"uQ2tFpVzcPLxN4TW6Vclah52rdN8G52a","source":"$87","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"auth-app","type":"code-project","project":"auth-app","taskNameActive":"Adding close button","taskNameComplete":"Added close button"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"qkj9UGz9Qgc\",":false,"":null},"children":"$L88"}]}]

About

Tags

Share

About

Tags

Share

More from dollargill

More Templates Like This